<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!--weui.min.css-->
    <link rel="stylesheet" href="/static/index/css/page/base.css"/>
    <link rel="stylesheet" href="/static/index/css/page/font.css"/>
    <link rel="stylesheet" href="/static/index/jquery_weui/css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/index/jquery_weui/lib/weui.min.css">
    <!--jquery-weui.min.css-->
    
    <link rel="stylesheet" type="text/css" href="/static/index/jquery_weui/css/jquery-weui.min.css">
    <link rel="stylesheet" href="/static/index/css/page/friend.css" />
     <!--表情选择器css-->
    <link href="/static/index/css/page/webiaoqing.css" rel="stylesheet" type="text/css">
	<!--表情选择器js-->
	<script src="/static/index/jquery_weui/js/jquery_min.js" ></script>
	<script src="/static/index/jquery_weui/js/webiaoqin.js" ></script>
    <style>
    	.form{
    		text-align: center;
    	}
    	.form .text{
    		width:15rem;
    		height:1.5rem;
    		border-color:1px solid $ccc;
    	}
		.form .button{
			width:2.1rem;
    		height:1.7rem;
			
			
		}
		.personal.pageControl{
			min-height: 100%;
			position: relative;
		}
		.personal .form{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
		}
		
		
		
		#form_article img{
			vertical-align: middle;
		}
		#form_article{
			background: transparent;
			position: relative;
			z-index: 1000;
			height: auto;
			
		}
		#content{
			position: absolute;
			left: 15px;
			right: 0;
			bottom: 0;
			top: 10px;
		}
		.answer-input {
    		position: fixed;
    		bottom: 0;
    		left: 0;
    		right: 0;
    		background: #fff;
    	}
    	.answer-input a{
    		padding: .2rem .6rem;
    		border-radius: 5px;
    		background: #F7F7F7;
    		border: 1px solid #EEEEEE;
    	}
    	#page_emotion_show{
    		padding: 0;
    		border-radius:0;
    		background: #F7F7F7;
    		border:none;
    		position: absolute;
    		top: -20px;
    		left: 10px;
    	}
    	
    	.answer-input .weui-input{
    		border: 1px solid #F7F7F7;
    		background: #f7f7f7;
    		padding: .2rem;
    		width: 90%;
    	}
    	.pageControl{
    		min-height: 100%;
    		position: relative;
    	}
    	.answer-input {
    		position: fixed;
    		bottom: 0;
    		left: 0;
    		right: 0;
    		background: #fff;
    	}
    	.answer-input a{
    		padding: .2rem .6rem;
    		border-radius: 5px;
    		background: #F7F7F7;
    		border: 1px solid #EEEEEE;
    	}
    	#page_emotion_show{
    		padding: 0;
    		border-radius:0;
    		background: #F7F7F7;
    		border:none;
    		position: absolute;
    		top: 10px;
    		left: 10px;
    	}
    	
    	.answer-input .weui-input{
    		border: 1px solid #F7F7F7;
    		background: #f7f7f7;
    		padding: .2rem;
    		width: 85%;
    	}
    	
    	/*图片处理css*/
    	.list2 .swiper-slide>a{
    		overflow: hidden;
    		position: relative;
    	}
    	.list2 .swiper-slide>a img{
    		
    		position: absolute;
    		left: 50%;
    		top: 50%;
    	}
    	.weui-cell2{
    		padding:0.4rem;
    	}
    	
    	#biaoqin{
    		
    	}
    	.answer-input .weui-input {
   
 
}
#page_emotion{
			overflow: hidden;
			width: 100%;
			
		}
#form_article img{
	vertical-align: middle;
}
#form_article{
	background: transparent;
	position: relative;
	z-index: 1000;
	height: auto;
	margin-left: 1.5rem;
}
#content{
			position: absolute;
			left: 15px;
			right: 0;
			bottom: 0;
			top: 7px;
			margin-left: 1.2rem;
			width: 64%;
		}
		
		.card-message .card-title p img{
			width: 20px;
			height: 20px;
		}
		
		/*固定顶部*/
		.main-top{
			height: 2.4rem;
		}
		.msui_nav{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 100;
		}
    </style>
</head>
<body>
<div class="pageControl personal bg-f5">
    <!--主体-->
    <div class="zhe"></div>
    <div class="main">
        <div class="bg-di"></div>
        <div class="main-top"></div>
        <div class="msui_nav msui_navTop">
            <a class="msui_navTop-back" href="javascript:history.back();"><i class="micon-back"></i></a>
            <h1 class="msui_navTop-title">{$friend_name.name}</h1>
            <a class="msui_navTop-icon" href="/index/personal/personal_detail?id={$friend_id}">
                <i class="micon-home1"></i>
            </a>
        </div>
    </div>
    <div class="ms-main card-add">
        {foreach name="chat_info" item="vo"}
	        {if $vo.user_id neq $user_id}
		        <div class="m_left">
		        	{if $vo.img}
		            <p><img src="{$vo.img}" alt=""/></p>
		            {else}
		            <p><img src="/static/index/img/head.png" alt=""/></p>
					{/if}
		            <p>{$vo.content}</p>
		            <i class="icon_san"></i>
		        </div>
	        {else}
		        <div class="m_right">
		        	{if $vo.img}
		            <p><img src="{$vo.img}" alt=""/></p>
		            {else}
		            <p><img src="/static/index/img/head.png" alt=""/></p>
					{/if}
		            <p>{$vo.content}</p>
		            <i class="icon_san"></i>
		        </div>
	        {/if}
        {/foreach}
    </div>
    <div class="page_emotion box_swipe" id="page_emotion">
		<dl id="list_emotion" class="list_emotion pt_10"></dl>  
		<dt><ol id="nav_emotion" class="nav_emotion"></ol></dt> 
	</div>
    
    
    <div class="answer-input weui-cell answerBtn">
    	<a href="" id="page_emotion_show"><img src="/static/index/images/arclist/0.gif" alt="" /></a>
    	<div class="weui-cell__bd">
    		
    		<article id="form_article" class="weui-input" contenteditable="true" onkeydown="myInput.listen(this, event);"></article>
    		<input class="weui-input" class="text" name="content" id='content' type="contenteditable"></input>
    	</div>
    	<div class="weui-cell__ft">
    		<a  id="button" href="javascript:;">发送</a>
    	</div>
    </div>
    <!--<div class="form">
        <input type="text" class="text" name="content" id="content" />
        <input type="button" class="button" value="发送" id="button" />
    </div>-->
</div>

<!-- jquery-2.1.4 -->
<script type="text/javascript" src="/static/index/jquery_weui/lib/jquery-2.1.4.js"></script>
<!-- jquery-weui.min.js -->
<script type="text/javascript" src="/static/index/jquery_weui/js/jquery-weui.min.js"></script>

<script>
	$(function(){
		var contentHeight=parseFloat($('.answerBtn.weui-cell ').css('height'));
		console.log(contentHeight);
		contentTop=$('.answerBtn').offset().top+contentHeight+20
		$('html, body').animate({  
                scrollTop: contentTop  
            }, 400);
		var winHeight = $(window).height();   
		$(window).resize(function(){
		   var thisHeight=$(this).height();
		    if(winHeight - thisHeight >50){
		    	var contentHeight=parseFloat($('.card-list.personal-list ').css('height'));
				contentTop=$('.answerBtn').offset().top+contentHeight+200
				$('html, body').animate({  
		                    scrollTop: contentTop  
		                }, 1000);
		        //窗口发生改变(大),故此时键盘弹出
		         //当软键盘弹出，在这里面操作
		    }else{
		    	
		        //窗口发生改变(小),故此时键盘收起
		        //当软键盘收起，在此处操作
		    }
		});
		var contentHeight=parseFloat($('.answerBtn.weui-cell ').css('height'));
		console.log(contentHeight);
		contentTop=$('.answerBtn').offset().top+contentHeight+20
		$("#content").focus(function(){
			$('html, body').animate({  
                    scrollTop: contentTop  
                }, 1000);
		})
		$(".page_emotion").hide()
		$("#page_emotion_show").click(function(e){
			e.preventDefault();
			var pageDisply=$(".page_emotion").css('display');
			console.log(pageDisply)
			if(pageDisply=='none'){
				$(".page_emotion").show().css('margin-bottom','2.4rem');
			}else if(pageDisply=='block'){
				$(".page_emotion").hide()
			}
			var top=$('.answerBtn').offset().top+100
			console.log(top)
			//			滚动
			$('html, body').animate({  
                    scrollTop: top  
                }, 400);
		})
		$('#list_emotion').on('click','span',function(){
		
			$("#content").css('display','none');
			var answerHeight=parseFloat($(".answer-input.weui-cell").css('height'))+20;
			$('.page_emotion.box_swipe').css('margin-bottom',answerHeight)
			var top=$('.answerBtn').offset().top+60
			//			滚动
			$('html, body').animate({  
                    scrollTop: top  
                }, 1000);
		})
		$(document).keyup(function(event){ 
			if($('#form_article').html()!==''){
				$("#content").css('display','none');
	 		}else{
	 			$("#content").css('display','block');
	 		}
	 		var answerHeight=parseFloat($(".answer-input.weui-cell").css('height'))+40;
			$('.page_emotion.box_swipe').css('margin-bottom',answerHeight)
		})

})
	$("#button").click(function(){
		content = $("#form_article").html();
		
		$.ajax({
		
		    type: 'POST',
		
		    url: "/index/friend/add_chat",
		
		    data: { content: content,friend_id:"{$friend_id}"},
			
			cache:false,
			
			dataType: "json",
			
		    success: function(data){
		    	obj = jQuery.parseJSON(data);
		    	
				if(obj.code == 1){
					content = obj.data.content;
					img = obj.data.img;
					user_id = obj.data.user_id;//当前登录用户
					friend_id = {$friend_id};//好友id
					if(user_id != friend_id){
						var type = 'm_right';
					}else{
						var type = 'm_left';
					}
					str = "<div class='"+type+"'><p><img src='"+img+"' alt=''></p><p>"+content+"</p> <i class='icon_san'></i></div>";
					$('.card-add').append(str);
					$('#form_article').html('');
				}
		   }
		
		
		});
	});
</script>
</body>
</html>

